<template>
  <div class="app-container">
    <div class="content-wrapper">
      <!-- 部位选择列表 -->
      <div class="part-list">
        <div v-for="part in partList" :key="part.id" class="part-item">
          <el-checkbox v-model="part.checked" @change="handleCheckChange">
            <span class="part-name">{{ part.partName }}</span>
          </el-checkbox>
          <div class="part-description">{{ part.partDescribe }}</div>
        </div>
      </div>



      <!-- 确认按钮 -->
      <el-button
        type="primary"
        class="confirm-button"
        @click="handleConfirm"
        :disabled="!selectedPartId"
      >
        确定
      </el-button>

      <!-- 查询结果展示区域 -->
      <div v-if="queryResult" class="query-result">
        <h3>查询结果</h3>
        <table class="result-table">
          <thead>
          <tr>
            <th>症状</th>
            <th>科室</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="symptom in queryResult" :key="symptom.id">
            <td>
              <el-checkbox v-model="symptom.checked">
                {{ symptom.diseaseName }}
              </el-checkbox>
            </td>
            <td>
              {{ symptom.departmentName }}
            </td>
          </tr>
          </tbody>
        </table>
        <el-button
          type="success"
          class="confirm-symptom-button"
          @click="handleConfirmSymptoms"
        >
          确定症状
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { listPart, getPart } from "@/api/patient/consultation/consultation";

export default {
  name: "Part",
  data() {
    return {
      loading: false,
      partList: [], // 部位列表
      queryResult: null, // 查询结果
      selectedPartId: null, // 选中的部位 ID
      selectedSymptoms: [] // 用于人体画像展示的选中症状
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询身体部位列表 */
    getList() {
      this.loading = true;
      listPart().then(response => {
        this.partList = response.data.map(item => ({
          id: item.id,
          partName: item.partName,
          partDescribe: item.partDescribe,
          checked: false // 添加一个 checked 属性来控制复选框的选中状态
        }));
        this.loading = false;
      }).catch(error => {
        console.error('获取数据失败:', error);
        this.loading = false;
      });
    },
    // 处理复选框变化
    handleCheckChange() {
      let selectedCount = 0;
      let selectedId = null;
      this.partList.forEach(part => {
        if (part.checked) {
          selectedCount++;
          selectedId = part.id;
        }
      });
      if (selectedCount > 1) {
        this.$message({
          message: '只能选择一个部位',
          type: 'warning'
        });
        this.partList.forEach(part => { part.checked = false; });
        this.selectedPartId = null;
      } else {
        this.selectedPartId = selectedId;
      }
    },
    // 点击确定按钮时触发
    handleConfirm() {
      if (this.selectedPartId) {
        this.getPart(this.selectedPartId);
      } else {
        alert('请先选择一个部位！');
      }
    },
    // 使用选中的 ID 进行查询
    getPart(id) {
      if (id) {
        this.loading = true;
        getPart(id).then(response => {
          const result = response.data; // 假设返回的数据格式是一个数组
          this.queryResult = result.map(item => ({
            ...item,
            checked: false // 添加一个 checked 属性来控制复选框的选中状态
          }));
          this.loading = false;
        }).catch(error => {
          console.error('查询数据失败:', error);
          this.queryResult = null;
          this.$message.error('查询失败');
          this.loading = false;
        });
      } else {
        console.log('未选中任何项');
      }
    },
    // 处理确定症状按钮点击事件
    handleConfirmSymptoms() {
      const selectedSymptoms = this.queryResult.filter(symptom => symptom.checked).map(symptom => ({
        id: symptom.id,
        departmentId: symptom.departmentId,
        departmentName: symptom.departmentName
      }));
      if (selectedSymptoms.length > 0) {
        alert(`选中的症状 ID 和科室 ID 和 科室名称:\n${selectedSymptoms.map(s => `${s.id} - ${s.departmentId} - ${s.departmentName}`).join('\n')}`);
        location.reload(); // 刷新页面
      } else {
        alert('请先选择症状！');
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px; /* 限制最大宽度 */
  margin: 0 auto;
}

.part-list {
  flex: 1;
  margin-right: 20px;
}

.confirm-button {
  margin-top: 20px;
  align-self: flex-start;
}

.query-result {
  flex: 0 0 300px; /* 固定宽度 */
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  margin-top: 20px;
}

.query-result h3 {
  margin-top: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.query-result ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.query-result li {
  margin-bottom: 10px;
}

.confirm-symptom-button {
  margin-top: 20px;
  margin-left: 20px;
  padding: 5px 15px; /* 调整按钮内边距 */
  font-size: 14px; /* 调整字体大小 */
}

.part-item {
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%; /* 使每个部位项占满容器宽度 */
  display: flex;
  flex-direction: column;
}

.checkbox {
  margin-bottom: 5px;
}

.part-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.part-description {
  color: #666;
  font-size: 14px;
}
</style>





<!--
<template>
  <div class="app-container">
    <div class="content-wrapper">
      &lt;!&ndash; 部位选择列表 &ndash;&gt;
      <div class="part-list">
        <div v-for="part in partList" :key="part.id" class="part-item">
          <el-checkbox v-model="part.checked" @change="handleCheckChange">
            <span class="part-name">{{ part.partName }}</span>
          </el-checkbox>
          <div class="part-description">{{ part.partDescribe }}</div>
        </div>
      </div>

      &lt;!&ndash; 人体部位图 &ndash;&gt;
      <div class="body-map">
        <div @click="selectPart('chest')" class="chest" :class="{ selected: selectedPartId === 'chest' }"></div>
      </div>

      &lt;!&ndash; 确认按钮 &ndash;&gt;
      <el-button
        type="primary"
        class="confirm-button"
        @click="handleConfirm"
        :disabled="!selectedPartId"
      >
        确定
      </el-button>

      &lt;!&ndash; 查询结果展示区域 &ndash;&gt;
      <div v-if="queryResult" class="query-result">
        <h3>查询结果</h3>
        <table class="result-table">
          <thead>
          <tr>
            <th>症状</th>
            <th>科室</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="symptom in queryResult" :key="symptom.id">
            <td>
              <el-checkbox v-model="symptom.checked">
                {{ symptom.diseaseName }}
              </el-checkbox>
            </td>
            <td>
              {{ symptom.departmentName }}
            </td>
          </tr>
          </tbody>
        </table>
        <el-button
          type="success"
          class="confirm-symptom-button"
          @click="handleConfirmSymptoms"
        >
          确定症状
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { listPart, getPart } from "@/api/patient/consultation/consultation";

export default {
  name: "Part",
  data() {
    return {
      loading: false,
      partList: [], // 部位列表
      queryResult: null, // 查询结果
      selectedPartId: null, // 选中的部位 ID
      selectedSymptoms: [] // 用于人体画像展示的选中症状
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询身体部位列表 */
    getList() {
      this.loading = true;
      listPart().then(response => {
        this.partList = response.data.map(item => ({
          id: item.id,
          partName: item.partName,
          partDescribe: item.partDescribe,
          checked: false // 添加一个 checked 属性来控制复选框的选中状态
        }));
        this.loading = false;
      }).catch(error => {
        console.error('获取数据失败:', error);
        this.loading = false;
      });
    },
    // 处理复选框变化
    handleCheckChange() {
      let selectedCount = 0;
      let selectedId = null;
      this.partList.forEach(part => {
        if (part.checked) {
          selectedCount++;
          selectedId = part.id;
        }
      });
      if (selectedCount > 1) {
        this.$message({
          message: '只能选择一个部位',
          type: 'warning'
        });
        this.partList.forEach(part => { part.checked = false; });
        this.selectedPartId = null;
      } else {
        this.selectedPartId = selectedId;
      }
    },
    // 点击确定按钮时触发
    handleConfirm() {
      if (this.selectedPartId) {
        this.getPart(this.selectedPartId);
      } else {
        alert('请先选择一个部位！');
      }
    },
    // 使用选中的 ID 进行查询
    getPart(id) {
      if (id) {
        this.loading = true;
        getPart(id).then(response => {
          const result = response.data; // 假设返回的数据格式是一个数组
          this.queryResult = result.map(item => ({
            ...item,
            checked: false // 添加一个 checked 属性来控制复选框的选中状态
          }));
          this.loading = false;
        }).catch(error => {
          console.error('查询数据失败:', error);
          this.queryResult = null;
          this.$message.error('查询失败');
          this.loading = false;
        });
      } else {
        console.log('未选中任何项');
      }
    },
    // 处理确定症状按钮点击事件
    handleConfirmSymptoms() {
      const selectedSymptoms = this.queryResult.filter(symptom => symptom.checked).map(symptom => ({
        id: symptom.id,
        departmentId: symptom.departmentId,
        departmentName: symptom.departmentName
      }));
      if (selectedSymptoms.length > 0) {
        alert(`选中的症状 ID 和科室 ID 和 科室名称:\n${selectedSymptoms.map(s => `${s.id} - ${s.departmentId} - ${s.departmentName}`).join('\n')}`);
        location.reload(); // 刷新页面
      } else {
        alert('请先选择症状！');
      }
    },
    // 选择人体部位
    selectPart(partId) {
      this.selectedPartId = partId;
      this.getPart(partId);
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px; /* 限制最大宽度 */
  margin: 0 auto;
}

.part-list {
  flex: 1;
  margin-right: 20px;
}

.confirm-button {
  margin-top: 20px;
  align-self: flex-start;
}

.query-result {
  flex: 0 0 300px; /* 固定宽度 */
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  margin-top: 20px;
}

.query-result h3 {
  margin-top: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.query-result ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.query-result li {
  margin-bottom: 10px;
}

.confirm-symptom-button {
  margin-top: 20px;
  margin-left: 20px;
  padding: 5px 15px; /* 调整按钮内边距 */
  font-size: 14px; /* 调整字体大小 */
}

.part-item {
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%; /* 使每个部位项占满容器宽度 */
  display: flex;
  flex-direction: column;
}

.checkbox {
  margin-bottom: 5px;
}

.part-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.part-description {
  color: #666;
  font-size: 14px;
}

.body-map {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: #f0f0f0;
  margin-top: 20px;
}

.chest {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  cursor: pointer;
}

.selected {
  border: 2px solid #000;
}
</style>
-->




